<template>
  <div class="nav-left">
  </div>
</template>
<script>
  var list = [
    {
      name: '介绍',
      path: '/hello',
      id: 'hello'
    },
    {
      name: '组件',
      path: '/comp',
      id: 'comp'
    }
  ];

  function render($) {
    var htmls = [];
    list.forEach(item => {
      htmls.push(`<div class="nav-item ${item.id}"><a class="nav-item_inner" href="#${item.path}">${item.name}</a></div>`);
    });

    $('.nav-left').html(htmls.join(''));
  }

  export default function ($) {
    // 监听路由
    $.on('router', (path) => {
      // const item = list.find(item => item.path == path);
      // $("." + item.id).addClass('seleted-style');
    });

    // 渲染
    render($);

    // 监听点击
    $.el.on('click', '.nav-item', function () {
      $('.nav-item').removeClass('seleted-style');
      $(this).addClass('seleted-style')
    })
  }
</script>
<style>
  .nav-left {
    width: 150px;
    height: 100vh;
    background: #fafafa;
  }

  .nav-left .nav-item .nav-item_inner {
    display: block;
    padding: 15px;
  }

  .nav-item a {
    text-decoration: none;
    color: #111;
  }

  .seleted-style a {
    color: red;
  }
</style>